<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="./jQuery.js"></script>
    <title>Document</title>
</head>
<style>
    .container img {
        width: 200px;
    }
</style>
<body>
    <div class="cont">
        <input type="button" value="科技" class="ipt" name="keji">
        <input type="button" value="骑车" class="ipt" name="qiche">
        <input type="button" value="头条" class="ipt" name="top">
        <input type="button" value="游戏" class="ipt" name="youxi">
        <input type="button" value="娱乐" class="ipt" name="yule">
    </div>
    <div class="container"></div>
</body>
<script>
    $('.ipt').on('click', function () {
        methods(this.name)
    })
    methods('top')
    function methods(item) {
        $.ajax({
            type: 'get',
            url: "./date/" + item + ".json",
            async: true,
            success(res) {
                let data = res.result.data
                $('.container').html('')
                data.forEach(item => {
                    let module = `
                        <a href=${item.url}> <h1>${item.title}</h1></a>
                        <p>${item.date}</p>
                        <img src = ${item.thumbnail_pic_s ? item.thumbnail_pic_s : './img/1.jpg'} />
                        <img src = ${item.thumbnail_pic_s02 ? item.thumbnail_pic_s02 : './img/1.jpg'} />
                        <img src = ${item.thumbnail_pic_s03 ? item.thumbnail_pic_s03 : './img/1.jpg'} />
                    `
                    $('.container').append(module);
                });
            }
        })
    }
</script>

</html>